<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
	
     <!-- 给当前页面域添加一段java代码，用来自动获取当前项目名，不写死,然后再通过EL表达式获取 -->
    <%
    	pageContext.setAttribute("PATH",request.getContextPath());
    
     %>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="${PATH }/css/reset.css">
	<link rel="stylesheet" href="${PATH }/css/webstyle.css">
	<link rel="stylesheet" href="${PATH }/css/flickerplate.css">
	<link rel="shortcut icon" href="favicon.ico" >
	<!-- 引入bootstrapcss与js -->
	<%-- <link rel="stylesheet" href="${PATH}/css/bootstrap.css">
	<script type="text/javascript" src="${PATH}/js/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="${PATH}/js/bootstrap.js"></script> --%>

	<!--轮播组件 libraries-->
	<script src="${PATH }/js/jquery-v1.10.2.min.js" type="text/javascript"></script>
	<script src="${PATH }/js/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
	<script src="${PATH }/js/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>
	<script src="${PATH }/js/flickerplate.min.js" type="text/javascript"></script>
	<!--轮播组件 flickerplate-->
	<script>
	$(document).ready(function(){
		$('.flicker-example').flicker();
	});
	</script>
	<title>淮安结婚网</title>
</head>
<body>

	<div class="index-cover"></div>
	<!-- 公共头部 -->
	<div class="common-header">
		<div class="header-content layout">
			<img src="${PATH }/img/logo/logo.png">
		</div>
		<div class="nav clearfix">
			<ul class="layout">
				<li class="active"><a href="${PATH }/">首页</a></li>
				<li><a href="${PATH }/user/yxhq/list.go">优选婚庆</a></li>
				<li><a href="${PATH }/user/yxjd/list.go">优选酒店</a></li>
				<li><a href="${PATH }/user/yxzc/list.go">优选主持</a></li>
				<li><a href="${PATH }/user/yxhz/list.go">优选化妆礼服</a></li>
				<li><a href="${PATH }/user/yxsx/list.go">优选摄像</a></li>
				<li><a href="${PATH }/user/yxsy/list.go">优选摄影</a></li>
				<li><a href="${PATH }/user/service/list.go">优选服务商</a></li>
			</ul>
		</div>
	</div>
	
	<!-- 首页轮播组件 -->
	<div class="flicker-example" data-block-text="false">
			<ul>
				<c:forEach items="${rotates}" var="list">
					<li data-background="${list.url }"></li>
				</c:forEach>
			</ul>
		 <!-- </div>  -->
	</div>


	<!-- 服务宗旨 -->
	<div class="sologen layout">
		<img src="${PATH }/img/index/sologen.png" alt="">
	</div>

	<!-- 优选婚庆 -->
	<div class="index-wed layout clearfix">
		<h2>优选婚庆<span class="index-wed-more"><a href="${PATH }/user/yxhq/list.go">查看更多</a></span></h2>
		<ul class="clearfix">
			<c:forEach items="${allYxhqs}" var="list" begin="0" end="11">
				<li>
					<a href="${PATH }/user/yxhq/${list.id}.go">
						<div class="index-wed-list-img">
							<img src="${list.url }" alt="">
						</div>
						<div class="index-wed-list-info">
							<h3>${list.pname }</h3>
							<p><span>${list.region }</span>|<span>${list.sty }</span><span class="index-wed-list-info-more">了解更多</span></p>
						</div>
					</a>
				</li>
			</c:forEach>	
		</ul>
	</div>

	<!-- 广告位1 -->
	<div class="index-ad layout">
		<c:forEach items="${advers }" var="list" begin="0" end="0">
			<a href="${PATH }${list.advertisementUrl }"><img src="${list.advertisement }" alt="广告位1"></a>
		</c:forEach>
		
	</div>

	<!-- 优选酒店 -->
	<div class="index-hotel layout clearfix">
		<h2>优选酒店<span class="index-hotel-more"><a href="${PATH }/user/yxjd/list.go">查看更多</a></span></h2>
		<div class="index-hotel-left">
			<ul>
				<c:forEach items="${yxjds }" var="list" begin="0" end="1">
					<li><!-- 这里是左侧2个排列的酒店 -->
						<a href="${PATH }/user/yxjd/${list.id}.go">
							<div class="index-hotel-list-img">
								<img src="${list.picture}" alt="左侧酒店首图">
							</div>
							<div class="index-hotel-list-info">
								<h3>${list.name }</h3>
								<p><span>${list.region }</span>|<span>${list.sty }</span><span class="index-hotel-list-info-more">了解更多</span></p>
							</div>
						</a>
					</li>
				</c:forEach>
			</ul>
		</div>
		<div class="index-hotel-right">
			<ul>
				<c:forEach items="${yxjds }" var="list" begin="2" end="10">
					<li><!-- 这里是右侧 9个酒店排列-->
						<a href="${PATH }/user/yxjd/${list.id}.go">
							<div class="index-hotel-list-img">
								<img src="${list.picture }" alt="右侧酒店">
							</div>
							<div class="index-hotel-list-info">
								<h3>${list.name }</h3>
								<p><span>${list.region }</span>|<span>${list.sty }</span><span class="index-hotel-list-info-more">了解更多</span></p>
							</div>
						</a>
					</li>
				</c:forEach>
			</ul>
		</div>


	</div>

	<!-- 广告位 2-->
	<div class="index-ad layout">
		<c:forEach items="${advers }" var="list" begin="1" end="1">
			<a href="${PATH }${list.advertisementUrl }"><img src="${list.advertisement }" alt="广告位2"></a>
		</c:forEach>
	</div>

	<!-- 优选主持、化妆、摄影、摄像、酒店 -->
	<div class="index-mod-tab layout clearfix">
		<ul class="tabs clearfix">
			<li class="active">优选主持</li>
			<li>优选化妆礼服</li>
			<li>优选摄像</li>
			<li>优选摄影</li>
		</ul>
		<div class="panel active clearfix">
			<ul class="index-host-list clearfix">
				<c:forEach items="${yxzcs }" var="list" begin="0" end="11">
					<li><!-- 这里是12个主持人 -->
						<a href="${PATH }/user/yxzc/${list.id}.go">
							<div class="index-host-list-img">
								<img src="${list.picture }" alt="主持人头像">
							</div>
							<div class="index-host-list-info">
								<h3>${list.name }</h3>
								<p><span>${list.region }</span>|<span>${list.experience }</span><span class="index-host-info-price">${list.price }</span></p>
							</div>
						</a>
					</li>
				</c:forEach>
			</ul>
			<div class="index-host-list-more">
				<a href="${PATH }/user/yxzc/list.go"><span>查看更多主持</span></a>
			</div>
		</div>
		<div class="panel">
			<ul class="index-photo-list clearfix">
				<c:forEach items="${yxhzs }" var="list" begin="0" end="5">
					<li><!-- 这里6个化妆礼服 -->
						<a href="${PATH }/user/yxhz/${list.id}.go">
							<div class="index-photo-list-img">
								<img src="${list.picture }" alt="化妆师">
							</div>
							<div class="index-photo-list-info">
								<h3>${list.name }</h3>
								<p><span>${list.region }</span>|<span>${list.experience }</span><span class="index-photo-info-price">${list.price }</span></p>
							</div>
						</a>
					</li>
				</c:forEach>
			</ul>
			<div class="index-photo-list-more">
				<a href="${PATH }/user/yxhz/list.go"><span>查看更多化妆师</span></a>
			</div>
		</div>

		<div class="panel">
			<ul class="index-photo-list clearfix">
				<c:forEach items="${yxsxs }" var="list" begin="0" end="5">
					<li><!-- 这里是6个摄像师 -->
						<a href="${PATH }/user/yxsx/${list.id}.go">
							<div class="index-photo-list-img">
								<img src="${list.picture }" alt="摄像师图片">
							</div>
							<div class="index-photo-list-info">
								<h3>${list.name }</h3>
								<p><span>${list.region }</span>|<span>${list.experience }</span><span class="index-photo-info-price">${list.price }</span></p>
							</div>
						</a>
					</li>
				</c:forEach>
			</ul>
			<div class="index-photo-list-more">
				<a href="${PATH }/user/yxsx/list.go"><span>查看更多摄像师</span></a>
			</div>
		</div>
			
		<div class="panel">
			<ul class="index-photo-list clearfix">
				<c:forEach items="${yxsys }" var="list" begin="0" end="5">
					<li><!-- 这里是6个摄影师 -->
						<a href="${PATH }/user/yxsy/${list.id}.go">
							<div class="index-photo-list-img">
								<img src="${list.picture }" alt="摄影师图片">
							</div>
							<div class="index-photo-list-info">
								<h3>${list.name }</h3>
								<p><span>${list.region }</span>|<span>${list.experience }</span><span class="index-photo-info-price">${list.price }</span></p>
							</div>
						</a>
					</li>
				</c:forEach>
			</ul>
			<div class="index-photo-list-more">
				<a href="${PATH }/user/yxsy/list.go"><span>查看更多摄影师</span></a>
			</div>
		</div>
	</div>

	<!-- 广告位3 -->
	<div class="index-ad layout">
		<c:forEach items="${advers }" var="list" begin="2" end="2">
			<a href="${PATH }${list.advertisementUrl }"><img src="${list.advertisement }" alt="广告位3"></a>
		</c:forEach>
	</div>
	
	<!-- 引入模板 ，服务商、酒水、底部栏、侧边栏-->
	<jsp:include page="FooterTemplete.jsp"></jsp:include>

	<!-- 优选主持、化妆、摄影摄像、酒店部分js -->
	<script>
		$('.tabs>li').on('click', function(){
            var $this = $(this)
            var index = $this.index()
            $this.addClass('active').siblings().removeClass('active')
            $('.panel').eq(index).addClass('active').siblings().removeClass('active')
        })
	</script>

	<script type="text/javascript">
		$(document).ready(function(){

		$("#leftsead a").hover(function(){
			if($(this).prop("className")=="youhui"){
				$(this).children("img.hides").show();
			}else{
				$(this).children("img.hides").show();
				$(this).children("img.shows").hide();
				$(this).children("img.hides").animate({marginRight:'0px'},'slow'); 
			}
		},function(){ 
			if($(this).prop("className")=="youhui"){
				$(this).children("img.hides").hide('slow');
			}else{
				$(this).children("img.hides").animate({marginRight:'-143px'},'slow',function(){$(this).hide();$(this).next("img.shows").show();});
			}
		});

		$("#top_btn").click(function(){if(scroll=="off") return;$("html,body").animate({scrollTop: 0}, 600);});

		});
	</script>
</body>
</html>